<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>我的分享码</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <link rel="stylesheet" href="weixin-demo/style.css">
	<link rel="stylesheet" href="./css/aui.css">
	<link rel="stylesheet" type="text/css" href="./css/aui-flex.css" />
	<link rel="stylesheet" href="./css/main.css">
<!--	<link rel="stylesheet" href="./order_detail/css/fenXiang.css">-->
	<link rel="stylesheet" href="./css/weui.min.css">

	<script type="text/javascript" src="./js/base.js"></script>
</head>
<style>
	.a{
		color: #990073;
	}
</style>
<body ontouchstart="">
<div class="aui-bar aui-bar-nav aui-bar-top">
	<a class="aui-pull-left aui-btn " >
		<span class="aui-iconfont aui-icon-left" onclick="javascript:window.history.back();" ></span>
	</a>
	<div class="aui-title">分享零元购</div>
	<div class="weui-mask_transparent" ></div>
</div>
<div style="margin-top:60px;height: 160px;width: 100%;text-align: center;border-bottom: rgb(193,193,193) 2px solid;padding-top: 20px;">
	<img style="border-radius: 80px 80px 80px;margin: auto;" width="80px" id="imgbase" src="<?=$wx_images?>"/>
	<div style="font-weight: bold"><?=$wx_name?></div>
</div>
<button class="btn" style="background-color: rgb(254,0,90)"  id="previewImage">点击查看</button>
<div id="qrCodeDiv">  </div>
<canvas id="demoCanvas" width="800px" height="1000px" >
</canvas>

</body>
<script type="text/javascript" src="./js/jquery-1.8.0.js"></script>

<!-- loading toast -->
<div id="loadingToast" style="display:none;">
	<div class="weui-mask_transparent"></div>
	<div class="weui-toast">
		<i class="weui-loading weui-icon_toast"></i>
		<p class="weui-toast__content">分享码生成中</p>
	</div>
</div>
<script>
	$('#loadingToast').fadeIn(50);
	$('.weui-mask_transparent').css('background-color','rgba(0,0,0,0.2)');
	$('.weui-mask_transparent').css('display','block');
</script>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript" src="./js/utf.js"></script>
<script type="text/javascript" src="./js/jquery.qrcode.js"></script>
<script type="text/javascript" src="./js/api.js"></script>
<script type="text/javascript" src="./js/aui-toast.js"></script>
<script src="./js/zepto.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>

<script></script>
<script>
  /*
   * 注意：
   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 如有问题请通过以下渠道反馈：
   * 邮箱地址：weixin-open@qq.com
   * 邮件主题：【微信JS-SDK反馈】具体问题
   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
   */
  wx.config({
	  debug: false,
	  appId: '<?=$signPackage["appId"];?>',
	  timestamp: <?= $signPackage["timestamp"];?>,
	  nonceStr: '<?=$signPackage["nonceStr"];?>',
	  signature: '<?=$signPackage["signature"];?>',
	jsApiList: [
		'checkJsApi',
		'onMenuShareTimeline',
		'onMenuShareAppMessage',
		'onMenuShareQQ',
		'onMenuShareWeibo',
		'hideMenuItems',
		'showMenuItems',
		'hideAllNonBaseMenuItem',
		'showAllNonBaseMenuItem',
		'translateVoice',
		'startRecord',
		'stopRecord',
		'onRecordEnd',
		'playVoice',
		'pauseVoice',
		'stopVoice',
		'uploadVoice',
		'downloadVoice',
		'chooseImage',
		'previewImage',
		'uploadImage',
		'downloadImage',
		'getNetworkType',
		'openLocation',
		'getLocation',
		'hideOptionMenu',
		'showOptionMenu',
		'closeWindow',
		'scanQRCode',
		'chooseWXPay',
		'openProductSpecificView',
		'addCard',
		'chooseCard',
		'openCard'
	  ]
  });
  wx.ready(function () {
	  var savePath= '';
		  $.ajax({
			  url: "?r=site%2Fsite%2Fgeterwurl",
			  type:'post',
			  asyn:false,
			  success:function(data){
				  var result = eval('('+data+')');
				  if(result['code']==202){
					  savePath = result['qcode_images'];
					  $('#loadingToast').fadeOut(10);
					  $('.weui-mask_transparent').css('display','none');
					  wx.previewImage({
						  current: '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
						  urls: [
							  '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
						  ]
					  });
					  return ;
				  }
				  userInfo = result;
				  var qrcode = $('#qrCodeDiv').qrcode({
					  render : "canvas",
					  text:userInfo.erwUrl,
					  height: "200",
					  width: "200",
					  background: '#ffffff',
					  foreground: '#000000',
					  src:userInfo.wx_images
				  }).hide();
				  var canvas=qrcode.find('canvas').get(0);
				  var imgbase = document.getElementById("imgbase");

				  $.ajax({
					  url: "?r=marketing%2Fsharereb%2Fuploadw",
					  type: 'post',
					  asyn:false,
					  data:{data:canvas.toDataURL('image/png')},
					  success: function (data) {
						  var re = eval('('+data+')');
						  if(re['code']==200) {
							  var erpath = '<?=Yii::$app->params['domurl']?>wx/frontend'+re['ewmPath'];
							  var txPath = '<?=Yii::$app->params['domurl']?>wx/frontend'+re['txPath'];
							  var basePath = '';
							  var canvasDom = document.getElementById("demoCanvas");
							  canvasDom.style.display='none';
							  canvasDom.width = 800;
							  canvasDom.height = 1000;
							  //通过Canvas Dom对象获取Context的对象
							  var context = canvasDom.getContext("2d");
							  context.fillStyle = '#00000';
							  context.rect(0,0,canvasDom.width,canvasDom.height);
							  var  top = canvasDom.height/2-canvasDom.width*882/678/2;

							  var weixin = new Image();//创建一张图片
							  weixin.src = '<?=Yii::$app->params['domurl']?>wx/frontend/web/upload/weixin.png';//设置图片的路径
							  weixin.onload = function () {
								  context.drawImage(weixin, 0, canvasDom.height/2-canvasDom.width*882/678/2,canvasDom.width,canvasDom.width*882/678);
								  var touxiang = new Image();
								  touxiang.src = erpath;//设置图片的路径
								  touxiang.onload = function () {
									  context.drawImage(touxiang, 113*canvasDom.width/678,294*canvasDom.width/678+top, 451*canvasDom.width/678, 451*canvasDom.width/678);
									  var image = new Image();//创建一张图片
									  image.src = txPath;//设置图片的路径
									  image.onload = function () {
										  context.drawImage(image,274*canvasDom.width/678,460*canvasDom.width/678+top,116*canvasDom.width/678,116*canvasDom.width/678);
										  basePath =canvasDom.toDataURL();
//
										  $.ajax({
											  url: "?r=marketing%2Fsharereb%2Fsaveimg",
											  type: 'post',
											  data: {data: basePath},
											  asyn:false,
											  success: function (data) {
												  var res = eval('('+data+')');
												  if(res['code']==200) {
													  savePath = res['savePath'];
													  $('#loadingToast').fadeOut(10);
													  $('.weui-mask_transparent').css('display','none');
													  wx.previewImage({
														  current: '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
														  urls: [
															  '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
														  ]
													  });
												  }
											  }
										  })
									  };
								  };
							  };
//
						  }
					  }
				  })
			  },
			  error:function(){
				  console.log("没有更多商品")
			  }
		  });


	  // 5.2 图片预览
	  document.querySelector('#previewImage').onclick = function () {
		  wx.previewImage({
			  current: '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
			  urls: [
				  '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
			  ]
		  });
	  };
  })

</script>
</html>